.login {
  width: 100%;
  height: 100%;
  .et-flex-center();
  position: relative;

  .login-img {
    width: 50%;
    height: 100%;
    background-color: rgb(96, 170, 255);
    img{
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
  }

  .login-cards {
    width: 50%;
    height: 100%;
    background-color: white;
    padding: 150px 0 0 200px;
    box-sizing: border-box;
    .et-flex-column-normal();

    .card {
      width: 400px;

      .card-titles {
        width: 100%;
        margin-bottom: 20px;

        .logo {
          width: 45px;
          height: 45px;
          .et-flex-center();
          margin-bottom: 20px;

          img {
            width: 45px;
            height: 45px;
          }
        }

        .title {
          width: 100%;
          font-size: 26px;
          color: rgb(96, 170, 255);
          font-weight: bold;
        }
      }

      .navs {
        width: 80%;
        height: 35px;
        .et-flex-start();

        .nav {
          width: 25%;
          height: 100%;
          border-bottom: 3px solid transparent;
          .et-flex-start();
          font-size: 20px;
          font-weight: 700;
          cursor: pointer;
          color: #666;

          &.actived {
            border-color: @primary-color !important;
          }

          &:not(:first-child) {
            margin-left: 15px;
          }
        }
      }

      .container {
        width: 100%;
        padding: 20px 0;
        box-sizing: border-box;

        .sign-rows {
          width: 100%;
          .et-flex-column-center();

          .sign-row {
            width: 100%;
            height: 45px;
            margin-bottom: 18px;
            .et-flex-start();

            .sign-field {
              flex: 1;
              height: 45px;
              background-color: rgb(245, 247, 249);
              border-radius: 4px;
              .et-flex-start();

              .field-icon {
                width: 20px;
                height: 20px;
                margin: 0 5px;
                font-size: 20px;
                flex-shrink: 0;
                color: #c0c4cc;

                &.hoverable {
                  cursor: pointer;
                }
              }

              input {
                border: 0;
                padding: 0 16px;
                outline: none;
                background: none;
                background-color: rgba(0, 0, 0, 0);
                flex: 1;

                &::placeholder {
                  color: #bbb;
                }
              }
            }

            .send-btn {
              width: 106px;
              height: 100%;
              border-radius: 4px;
              border: 1px solid @primary-color;
              box-sizing: border-box;
              background-color: white;
              color: @primary-color;
              .et-flex-center();
              cursor: pointer;
              margin-left: 20px;
            }
          }
        }

        .footer {
          width: 100%;
          margin-top: 10px;
          height: 44px;
          box-sizing: border-box;
          border-radius: 4px;
          .et-flex-center();
          font-size: 18px;
          color: white;
          background-color: rgb(96, 170, 255);
          cursor: pointer;
        }
      }
    }
  }
}